<!--
 @author: zgg (作者)
 @create: 2021-08-30 更改日期
   -->

<template>
  <div class="app-container">
    <div class="admin-box">
      <div class="admin-title">添加/修改管理员</div>
      <div class="ad-user-form-div">
        <!-- size用于控制该表单内组件的尺寸值为medium / small / mini -->
        <el-form ref="form" :model="form" :label-position="labelPosition" label-width="100px" style="width:500px;">
          <el-form-item label="用户头像">
            <div v-if="!form.image" class="up-img" @click="upImg"><i class="el-icon-plus" /></div>
            <img v-else class="up-img" width="100%" :src="form.image + '?imageView2/1/w/150/h/150'" alt=""
              @click="upImg">
            <!-- <el-tag>用于登录显示头像，推荐上传尺寸100*100</el-tag> -->
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" class="form-input" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="姓名" prop="real_name">
            <el-input v-model="form.real_name" class="form-input" placeholder="请输入真实姓名" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" class="form-input" type="password" placeholder="请输入密码" />
          </el-form-item>

          <!-- <el-form-item label="移动电话" prop="tel">
            <el-input v-model="form.tel" class="form-input" placeholder="请输入电话号码" />
          </el-form-item> -->
          <el-form-item label="邮箱地址" prop="mailbox">
            <el-input v-model="form.mailbox" class="form-input" placeholder="请输入邮箱" />
          </el-form-item>
          <!-- <el-form-item label="社保卡号" prop="essc_no">
            <el-input v-model="form.essc_no" class="form-input" placeholder="请输入社保卡号" />
          </el-form-item> -->
          <el-form-item label="用户权限组" prop="role_ids">
            <el-checkbox-group v-model="checkRoles" @change="handleCheckedChange">
              <el-checkbox v-for="(item,index) in roles" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
         <!-- <el-form-item label="管理小区" prop="xiaoquIds">
            <el-select style="width: 600px;" multiple v-model="xiaoquIds" clearable filterable placeholder="请选择小区">
              <el-option v-for="(item,i) in xiaoquList" :key="i" :label="item.xq_name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="用户状态" prop="state">
            <el-switch v-model="form.state" class="ad-user-switch" inactive-color="#aaa" inactive-text="禁用"
              inactive-value="1" active-color="#5FB878" active-text="启用" active-value="0" :width="52"
              @change="change" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <!-- <router-link to="/admin/index">
              <el-button>返回</el-button>
            </router-link> -->
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { validPhone, validEmail } from '@/utils/validate'
  import { save, checkName } from '@/api/admin-manage'
  import { getRoleQuery } from '@/api/role'
  // import { searchHouseList } from "@/api/house/index";

  export default {
    name: 'AddUser',
    data() {
      return {
        form: {
          image: '', // 头像
          username: '', // 用户名
          password: '', // 密码
          real_name: '', // 真实姓名
          tel: '', // 电话
          mailbox: '', // 邮箱
          // essc_no: '',//社保卡号
          state: '0', // 启用状态(0启用，1禁用)
          role_ids: [] // 权限组id
        },
        id: '',
        checkRoles: [],
        roles: [],
        labelPosition: 'right', // label对齐方式，可选值为right、top、left
        xiaoquList: [],
        xiaoquIds: [],
      }
    },
    mounted() {
      this.getRoles();
      // this.searchHouseList();
    },
    methods: {
      /* eslint-disable */   //如果要eslint验证，请把这段代码删掉
      searchHouseList() {
        searchHouseList({}).then((res) => {
          if (res.state) {
            this.xiaoquList = res.data;
            if (this.xiaoquList.length) {
            }
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      // 获取权限组
      getRoles() {
        getRoleQuery().then(res => {
          if (res.state) {
            this.roles = res.data
            console.log('res----',res)
          } else {
            this.$message.error(res.msg)
          }
        })
      },

      // 创建
      onSubmit() {
        // console.log(this.xiaoquIds)
        if (!this.form.image) {
          this.$message.error('请选择用户头像!')
          return
        }
        if (!this.form.username) {
          this.$message.error('账号不能为空!')
          return
        }
        if (!validPhone(this.form.username)) {
          this.$message.error('请输入正确的手机号!')
          return
        }
        if (!this.form.password) {
          this.$message.error('密码不能为空!')
          return
        }
        if (!this.form.real_name) {
          this.$message.error('姓名不能为空!')
          return
        }
        // if (!this.form.tel) {
        //   this.$message.error('手机号不能为空!')
        //   return
        // }
        // if (!validPhone(this.form.tel)) {
        //   this.$message.error('请输入正确的手机号!')
        //   return
        // }
        if (!this.form.mailbox) {
          this.$message.error('邮箱不能为空!')
          return
        }
        if (!validEmail(this.form.mailbox)) {
          this.$message.error('请输入正确的邮箱!')
          return
        }
        if (this.form.role_ids.length === 0) {
          this.$message.error('请至少选择一个用户权限!')
          return
        }
      
        // console.log(this.form.role_ids,'-----',this.form.role_ids.indexOf(-1))
        // if (this.form.role_ids.indexOf(-1) == '-1') {
        //   if (!this.xiaoquIds.length) {
        //     this.$message.error('请至少选择一个管理小区!')
        //     return
        //   }
        // }
        let data = {}
        data['admin.id'] = this.id
        data['admin.headimg'] = this.form.image
        data['admin.username'] = this.form.username
        data['admin.password'] = this.form.password
        data['admin.name'] = this.form.real_name
        data['admin.email'] = this.form.mailbox
        data['admin.state'] = this.form.state
        data['role_id'] = (this.form.role_ids).join(',')
        // data['departmentIds'] = (this.xiaoquIds).join(',')
        
        checkName({ value: this.form.username }).then(res => {
          if (res.state) {
            this.$message.error('用户名已存在,请重新输入!')
          } else {
            this.saveUser(data)
          }
        })
      },

      // 保存用户信息函数
      saveUser(data) {
        save(data).then(res => {
          if (res.state) {
            this.$message({ message: '添加管理员成功', type: 'success', duration: 2000 })
            setTimeout(() => {
              this.$store.dispatch('tagsView/delView', this.$route)
              // this.$router.push({path:'/admin/index'})
              this.$router.push({ path: '/admin' })
            }, 200)
          } else {
            this.$message.error(res.msg)
          }
        })
      },

      // 上传头像
      upImg() {
        // 上传单个文件
        this.hhFolder({
          max: 1,
          filter: 'image',
          thumb_w: 500,
          thumb_h: 250,
          success: files => {
            this.form.image = files[0].url;
          }
        });
      },

      // 返回页面
      back() {
        this.$store.dispatch('tagsView/delView', this.$route)
        // this.$router.push({path:'/admin/index'})
        this.$router.push({ path: '/permission/admin' })
      },

      // 状态改变
      change(val) {
        // console.log(val)
        this.form.state = val
      },

      // 权限选中
      handleCheckedChange(val) {
        this.form.role_ids = val
        // console.log(val)
      }

    }
  }
</script>

<style lang="scss" scoped>
  .admin-box {
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12);
    background: #fff;

    .admin-title {
      font-size: 16px;
      color: #333;
      padding: 15px;
      border-bottom: 1px solid #f2f2f2;
    }

    .ad-user-form-div {
      padding: 16px 40px;

      .up-img {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 120px;
        height: 120px;
        cursor: pointer;
        line-height: 120px;
        vertical-align: top;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-icon-plus {
          font-size: 28px;
          color: #8c939d;
        }
      }

      .up-img:hover {
        border: 1px dashed #409eff;
      }

      .form-input {
        width: 220px;
      }
    }
  }
</style>

<style lang="scss">
  // element-ui样式修改
  // 表单修改
  .ad-user-form-div {
    label {
      font-weight: 500;
    }

    .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 15px;
      color: #333;
      line-height: 40px;
      padding: 0 12px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    // .el-form-item--medium .el-form-item__label{
    //   line-height: 36px;
    // }
    // .el-form-item--small .el-form-item__label{
    //   line-height: 32px;
    // }
    // .el-form-item--mini .el-form-item__label{
    //   line-height: 28px;
    // }
  }

  // switch按钮修改
  .ad-user-switch {
    .el-switch__label {
      position: absolute;
      display: none;
      color: #fff;
    }

    /*打开时文字位置设置*/
    .el-switch__label--right {
      z-index: 1;
      left: -6px;
    }

    /*关闭时文字位置设置*/
    .el-switch__label--left {
      z-index: 1;
      right: -5px;
    }

    /*显示文字*/
    .el-switch__label.is-active {
      display: block;
    }
  }
</style>